<template>
    <div class="index">
        <el-container class="nav_menu">
  <el-aside width="200px">

   <el-menu
      default-active="/marger/margerclass"
      class="el-menu-vertical-demo"
    
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      >
      <!-- router  开启路由模式 -->
        
        <!-- /marger/margerclass 跳转的地址 -->
      <el-menu-item index="/marger/margerclass">
        <i class="el-icon-menu"></i>
        <span slot="title">导航1</span>
      </el-menu-item>

      <el-menu-item index="/marger/stumarger">
        <i class="el-icon-document"></i>
        <span slot="title">导航2</span>
      </el-menu-item>

      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">导航3</span>
      </el-menu-item>
    </el-menu>
  
  </el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main> <router-view /> </el-main>
  </el-container>
</el-container>
    </div>
</template>

<script>
export default {


    data() {
        return {
            routerList:[],
        };
    },

    //创建生命周期
    created(){  
        //处理动态路由  getRoutes获取所有活跃的路由记录表   根据不同角色渲染不同数据
        let arr = this.$router.getRoutes();
        arr.forEach((item,index)=>{
            let obj = {};
            if(item.meta && item.meta.label){  //如果路由源信息为真就处理
                obj.path = item.path;
                obj.name = item.name;
                obj.label = item.meta.label
            }
            this.routerList.push(obj)
        })
        console.log(this.routerList,'添加成功')
        console.log(this.$router.getRoutes())
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-menu-vertical-demo{
  height:100%
}
#app{
  width: 100vw;
  height: 100%;
}
.nav_menu{
  height: 100vh;
}

</style>